<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox 测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .header {
        display: flex;
        overflow-x: auto;
        background-color: #f0f0f0;
        border-bottom: 2px solid #000;
        position: relative;
      }

      .header::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
      }

      .header button {
        flex: 0 0 auto;
        margin: 0;
        padding: 15px 20px;
        background-color: #f0f0f0;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 16px;
        position: relative;
      }

      .header button.selected {
        background-color: #3498db;
        color: white;
      }

      .header button.left-rounded::before {
        content: "";
        position: absolute;
        bottom: -2px; /* 调整以覆盖底部边框 */
        left: 0;
        width: 50%;
        height: 10px; /* 圆角的高度 */
        background-color: #60db34;
        border-bottom-left-radius: 1px;
        /* 左侧圆角 */

        z-index: 1;
      }

      .header button.right-rounded::after {
        content: "";
        position: absolute;
        bottom: -2px; /* 调整以覆盖底部边框 */
        right: 0;
        width: 50%;
        height: 10px; /* 圆角的高度 */
        background-color: #3498db;
        border-bottom-right-radius: 50px;
        z-index: 1;
      }

      .content {
        padding: 20px;
        background-color: #f0f0f0;
        transition: background-color 0.3s;
      }

      .content div {
        display: none;
      }

      .content div.active {
        display: block;
      }

      .content div h2 {
        margin-top: 0;
      }

      .content div p {
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <button onclick="selectTab('tab1')" data-value="tab1" class="selected">
        Tab 1
      </button>
      <button onclick="selectTab('tab2')" data-value="tab2">Tab 2</button>
      <button onclick="selectTab('tab3')" data-value="tab3">Tab 3</button>
      <button onclick="selectTab('tab4')" data-value="tab4">Tab 4</button>
      <button onclick="selectTab('tab5')" data-value="tab5">Tab 5</button>
    </div>
    <div class="content">
      <div id="tab1" class="active" style="background-color: #3498db">
        <h2>Tab 1 Content</h2>
        <p>This is the content for Tab 1.</p>
      </div>
      <div id="tab2" style="background-color: #2ecc71">
        <h2>Tab 2 Content</h2>
        <p>This is the content for Tab 2.</p>
      </div>
      <div id="tab3" style="background-color: #e74c3c">
        <h2>Tab 3 Content</h2>
        <p>This is the content for Tab 3.</p>
      </div>
      <div id="tab4" style="background-color: #9b59b6">
        <h2>Tab 4 Content</h2>
        <p>This is the content for Tab 4.</p>
      </div>
      <div id="tab5" style="background-color: #34495e">
        <h2>Tab 5 Content</h2>
        <p>This is the content for Tab 5.</p>
      </div>
    </div>

    <script>
      let currentTab = "tab1";

      function selectTab(tabId) {
        // 移除所有按钮的 selected, left-rounded, right-rounded 类
        const buttons = document.querySelectorAll(".header button");
        buttons.forEach((button) => {
          button.classList.remove("selected", "left-rounded", "right-rounded");
        });

        // 添加选中按钮的 selected 类
        const selectedButton = document.querySelector(
          `.header button[data-value="${tabId}"]`
        );
        if (selectedButton) {
          selectedButton.classList.add("selected");

          // 获取选中按钮的索引
          const selectedIndex = Array.from(buttons).indexOf(selectedButton);

          // 设置相邻按钮的圆角
          if (selectedIndex > 0) {
            buttons[selectedIndex - 1].classList.add("right-rounded");
          }
          if (selectedIndex < buttons.length - 1) {
            buttons[selectedIndex + 1].classList.add("left-rounded");
          }
        }

        // 隐藏所有内容
        const contents = document.querySelectorAll(".content div");
        contents.forEach((content) => {
          content.classList.remove("active");
        });

        // 显示选中的内容
        const selectedContent = document.getElementById(tabId);
        if (selectedContent) {
          selectedContent.classList.add("active");
        }

        // 更新内容背景色与选中按钮背景色一致
        const contentBackgroundColor = selectedContent.style.backgroundColor;
        document.querySelector(".content").style.backgroundColor =
          contentBackgroundColor;
      }

      // 初始化选中状态
      window.onload = function () {
        selectTab(currentTab);
      };
    </script>
  </body>
</html>
